<template>
  <TwinFullScreenContainer
    :leftList="menuList"
    :rightList="rightList"
    :centerSpan="19"
    title="湖南省农业优势特色产业集群信息系统"
    type="fullScreenContainer"
  >
    <template slot="leftContent">
      <Panel :title="title2">
        <div class="weather-info">
          <div class="weather-yj">
            <img :src="warn" class="weather-yj-img" alt=""/>
            <span>气象预警：湖南气象台发布大风蓝色预警</span>
          </div>
          <div class="weather-box">
            <div class="weather-box-top" v-for="item in qxxxList">
              <div class="weather-box-top-item-top-div1">
                <span>{{ item.day }}</span>
              </div>
              <img :src="item.image" class="weather-box-top-item-center-img">
              <div class="weather-box-top-item-bottom-div1">
                <div class="div1"><span>{{ item.name }}</span></div>
                <div class="div2"><span class="span2">{{ item.qiwen }}</span></div>
              </div>
            </div>
          </div>

          <div class="weather-box1">
            <div class="weather-box1-div">
              <div class="weather-box1-div-item" v-for="item in qxxxItemList">
                <div class="weather-box1-div-item-div">
                  <div class="weather-box1-div-item-div-inner">
                    <span class="span1">{{ item.name }}</span>
                    <span class="span2">{{ item.value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Panel>
      <Panel :title='title2'>
        <div class="zdbwjk-info">
          <div class="zdbwjk-info-item" v-for="item in zdbwjkList">
            <span>{{ item.name }}</span>
            <img :src="item.image" alt="" @click="itemClick('V')">
          </div>
        </div>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel :title="title3">
        <div class="turan-info">
          <div class="turan-info-yj">
            <img :src="warn" class="turan-info-yj-img" alt=""/>
            <span>预警：检测到土壤湿度大，xxxxxx</span>
          </div>
          <div class="turan-info-content">
            <div class="item" v-for="item in turanList">
              <div>
                <div>
                  <div>
                    <span>{{ item.value }}</span>
                  </div>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Panel>
      <Panel :title='title4'>
        <div class="turan-wsd-info">
          <div class="bar1">
            <EchartsDemo :initData="chartData" :initChart="lineChart"></EchartsDemo>
          </div>
        </div>
      </Panel>
      <Panel :title='title5'>
        <div class="cbhjc-info">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '病害监测', value: '1' },{ name: '虫害监测', value: '2' }]"
                 @change="tabs_change"></tabs1>
        </div>
        <div class="cbhjc-info-content">
          <el-carousel :interval="4000" type="card" class="carousel" height="125px">
            <el-carousel-item v-for="item in bchList" :key="item.id">
              <img :src="item.image" alt="" @click="itemClick('I')">
            </el-carousel-item>
          </el-carousel>
        </div>
      </Panel>

    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <twinMap ref="TwinMap" @psMessage="handleTwinMessage"></twinMap>
      </div>
    </template>
    <template slot="centerContent">
      <growth-cycle
        :isVisible="isGrowthCycleVisible"
        :currentId="currentGrowthCycleId"
        :isVisiblePopu="isGrowthCyclePopuVisible"
        @update:currentId="updateCurrentId"
        @back:click="twinGoBack"
      />

      <div class="video-popu" v-if="isPopuWin">
        <div class="popup-panel">
          <div class="popup-panel-title">
            <div class="popup-panel-title-content">
              <div class="popup-panel-title-content-info">
                <img :src="titleIcon" alt="关闭">
                <span>{{ popuTitle }}</span>
              </div>
              <img :src="closeIcon" alt="关闭" @click="closeVideoPopu">
            </div>
          </div>
          <div class="popup-panel-content">
            <video-component v-if="isVideoPopu"/>
            <image-component v-if="isImagePopu"/>
          </div>
        </div>
      </div>
      <analysis ref="analysis"></analysis>
      <twin-operation></twin-operation>
    </template>

  </TwinFullScreenContainer>
</template>

<script>
import TwinFullScreenContainer from "@/views/twinScreen/main.vue";
import icon1 from './images/top-icon1.png'
import icon2 from './images/top-icon2.png'
import icon3 from './images/top-icon3.png'
import warn from './images/warn.png'

import zdjk01 from './images/zdjk01.png'
import zdjk02 from './images/zdjk02.png'
import zdjk03 from './images/zdjk03.png'
import zdjk04 from './images/zdjk04.png'
import zdjk05 from './images/zdjk05.png'
import zdjk06 from './images/zdjk06.png'
import EchartsDemo from '@/echartsDemo/index.vue'
import lineChart from "@/views/twinScreen/js/lineChart";
import Tabs1 from "@/views/templateBigScreen/tabs1.vue";

import conghai1 from './images/conghai1.png'
import conghai2 from './images/conghai2.png'
import conghai3 from './images/conghai3.png'
import conghai4 from './images/conghai4.png'
import TwinMap from "@/Iframe/twinMap.vue";
import Analysis from "@/views/twinScreen/analysis.vue";
import GrowthCycle from "@/views/twinScreen/growthcycle.vue";

import closeIcon from './images/popup-close-icon.png'
import titleIcon from './images/popup-icon.png'
import VideoComponent from "./../twinScreen/popupToTwin/video.vue";
import ImageComponent from "./../twinScreen/popupToTwin/image.vue";
import TwinOperation from "@/views/twinScreen//twinoperation.vue";

export default {
  components: {
    TwinOperation,
    GrowthCycle,
    Analysis,
    TwinMap,
    Tabs1,
    EchartsDemo,
    TwinFullScreenContainer,
    VideoComponent,
    ImageComponent
  },
  data() {
    return {
      icon1,
      icon2,
      icon3,
      warn,
      zdjk01,
      zdjk02,
      zdjk03,
      zdjk04,
      zdjk05,
      zdjk06,
      conghai1,
      conghai2,
      conghai3,
      conghai4,
      closeIcon,
      titleIcon,
      isPopuWin: false,
      isVideoPopu: false,
      isImagePopu: false,
      popuTitle: '',
      isGrowthCycleVisible: false,
      currentGrowthCycleId: 0,
      isGrowthCyclePopuVisible: false,
      tabs1_value: '1',
      menuList: [],

      rightList: [
        {name: '自由漫游', key: 'zymy', image: icon1},
        {name: '切换天气', key: 'qhms', image: icon2},
      ],
      title1: '气象信息',
      title2: '重点部位监控',
      title3: '土壤实时数据',
      title4: '土壤温湿度趋势',
      title5: '病虫害监测',
      lineChart,
      qxxxList: [
        {
          day: '今天 0613',
          image: icon3,
          name: '晴',
          qiwen: '16~17 ℃',
        },
        {
          day: '明天 0613',
          image: icon3,
          name: '晴',
          qiwen: '16~17 ℃',
        },
        {
          day: '后天 0613',
          image: icon3,
          name: '晴',
          qiwen: '16~17 ℃',
        },
      ],
      qxxxItemList: [
        {
          name: '温度',
          value: '26.9℃',
        },
        {
          name: '湿度',
          value: '58.6%',
        },
        {
          name: '降水量',
          value: '0.0mm',
        }, {
          name: '风速',
          value: '6.5m/s',
        },
        {
          name: '风向',
          value: '东南',
        },
        {
          name: '光照',
          value: '64Lue',
        }
      ],
      zdbwjkList: [
        {
          name: '监控点01',
          image: zdjk01,
        },
        {
          name: '监控点02',
          image: zdjk02,
        },
        {
          name: '监控点03',
          image: zdjk03,
        }, {
          name: '监控点04',
          image: zdjk04,
        },
        {
          name: '监控点05',
          image: zdjk05,
        },
        {
          name: '监控点06',
          image: zdjk06,
        }
      ],
      turanList: [
        {
          name: '土壤水张力',
          value: '1.3KPa',
        },
        {
          name: '土壤温度',
          value: '5℃',
        },
        {
          name: '土壤湿度',
          value: '10%',
        }, {
          name: '水位',
          value: '0.03m',
        },
        {
          name: '溶氧量',
          value: '3mg/L',
        },
        {
          name: 'PH值',
          value: '6.5',
        }
      ],
      chartData: {
        legend: {
          x: '60%',
          data: ['温度', '湿度'],
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '06:00', '12:00', '18:00', '24:00'],
            axisLine: {
              lineStyle: {
                color: "#1FE6E7"
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#1FE6E7'
              }
            }
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [200, 400, 250, 500, 550]
          },
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data: [450, 280, 550, 400, 550]
          }
        ]
      },
      bchList: [
        {image: conghai1, id: 1},
        {image: conghai2, id: 2},
        {image: conghai3, id: 3},
        {image: conghai4, id: 4},
      ],
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    tabs_change(val) {
      this.tabs1_value = val;
    },
    handleTwinMessage(res) {
      const resData = JSON.parse(res.detail);
      console.log(resData)
      if (resData && resData.command && resData.command === 201 || resData.command === 203) {
        this.isGrowthCycleVisible = true;
        this.currentGrowthCycleId = resData.CurrentLevel;
        if (resData.command === 203) {
          this.isGrowthCyclePopuVisible = resData.IsClickPlant;
        }
      } else if (resData && resData.command && resData.command === 204) {
        if (resData.IsPlantLook === true) {
          this.isGrowthCycleVisible = true;
          this.currentGrowthCycleId = resData.CurrentLevel;
        } else {
          this.isGrowthCycleVisible = false;
          this.isGrowthCyclePopuVisible = false;
        }
      }
    },
    updateCurrentId(newId) {
      this.currentGrowthCycleId = newId;
      window.KCDT.growthCycle(newId, (e) => {
        console.log(e)
      });
    },
    twinGoBack(isPlantLookMode) {
      this.isGrowthCycleVisible = false;
      this.isGrowthCyclePopuVisible = false;
      window.KCDT.plantLookMode(isPlantLookMode, (e) => {
      });
    },
    itemClick(tag) {
      this.isPopuWin = true;
      if (tag === 'I') {
        this.isVideoPopu = false;
        this.isImagePopu = true;
        this.popuTitle = '病虫害监测';
      } else {
        this.isVideoPopu = true;
        this.isImagePopu = false;
        this.popuTitle = '重点部位监控';
      }

    },
    closeVideoPopu() {
      this.isVideoPopu = false;
      this.isImagePopu = false;
      this.isPopuWin = false;
    },
  },
}
</script>

<style scoped lang="scss">
@import 'css/index';

.map-page-container {
  position: fixed !important;
}

.video-popu {
  position: absolute;
  z-index: 1;
  left: 22%;
  top: 20%;

  .popup-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;

    .popup-panel-title {
      height: 46px;
      opacity: 1;
      display: flex;
      flex-direction: column;
      padding: 8px;
      align-self: stretch;
      background: linear-gradient(270deg, rgba(23, 95, 79, 0) 0%, #175F4F 72%, rgba(23, 95, 79, 0) 100%);

      .popup-panel-title-content {
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        align-self: stretch;

        .popup-panel-title-content-info {
          width: 104.01px;
          height: 30px;

          > span {
            position: absolute;
            font-family: YouSheBiaoTiHei;
            font-size: 20px;
            font-weight: normal;
            line-height: 30px;
            letter-spacing: 2px;
            color: #FFFFFF;
            margin-left: 5px;
          }

          > img {
            margin-top: 7px;
            width: 16.01px;
            height: 16px;
          }
        }

        > img {
          /* 自动布局子元素 */
          position: static;
          left: 245px;
          top: 3px;
          width: 24px;
          height: 24px;
          opacity: 1;

          z-index: 2;
        }
      }
    }

    .popup-panel-content {
      /* 自动布局子元素 */
      position: static;
      left: 0px;
      top: 46px;
      border-radius: 5px;
      max-height: 500px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: rgba(10, 56, 48, 0.7);
      box-sizing: border-box;
      border: 1px solid rgba(59, 214, 172, 0.6);

      z-index: 1;
    }
  }
}
</style>
